import { useEffect } from "react";
import { useDrop } from "react-dnd";

interface MyComponentProps {
  // id: string
  handleDrop?: (a?: any, b?: any) => void;
  state?: any;
  children: any;
}

const MIddleDropableView: React.FC<MyComponentProps> = (props) => {

  const [{ isOver, canDrop }, drop] = useDrop(() => ({
    accept: ['container','input'],
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
    drop: (item: any, monitor: any) => {
      // const offset = monitor.getDifferenceFromInitialOffset();
      // const isClick = offset && (Math.abs(offset.x) < 5 && Math.abs(offset.y) < 5);
      // // console.log(monitor.didDrop(),'offset')
      // if (isClick) {
      //   props.handleDrop(item, monitor)
      // }
      if(item.sourceContainer!==props.state){
        props.handleDrop(item, monitor)
      }
      // console.log(item.sourceContainer,props.state, 'offset')

      // 只有当不是同一容器内拖拽时才执行
      // if (!monitor.isOver({ shallow: true })) {

      // }

    }
  }), [props.state])

  useEffect(() => {

  }, [])
  return (

    <div ref={drop}
      className={'w-full h-full inline-block  rounded bg-slate-400'}>
      {props.children}
    </div>
  )

}
export default MIddleDropableView;